<template>

  <div class="icesoft-app-tag d-flex align-center justify-space-between">
    <div class="d-flex align-center px-3">
      <a-dropdown :trigger="['contextmenu']" placement="bottom" arrow>
        <a-button
            :class="{'tag-item home':true}"
            :type="homeMenu.path == defaultActive?.[0]?'primary':undefined"
            class="transition-fast-in-fast-out"
            size="small"
            @click="onSelect(homeMenu)"
        >
          {{ homeMenu.name }}
        </a-button>

        <template #overlay>
          <a-menu>
            <a-menu-item @click="menuStore.closeByType('other',homeMenu.path)">关闭其他</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('left',homeMenu.path)">关闭左侧</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('right',homeMenu.path)">关闭右侧</a-menu-item>
            <a-menu-item divided @click="menuStore.closeByType('all',homeMenu.path)">关闭所有</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

      <a-dropdown v-for="(item,index) in history" :tabindex="index" class="ml-3" :trigger="['contextmenu']" placement="bottom" arrow>
        <a-button
            :class="{'tag-item':true,'active':item.path == defaultActive?.[0]}"
            :type="item.path == defaultActive?.[0]?'primary':undefined"
            class="transition-fast-in-fast-out"
            size="small"
            @click="onSelect(item)"
        >
          <div class="d-flex align-center">
            <div>{{ item.name }}</div>
            <CloseOutlined class="close-icon" style="font-size: 10px;" @click.stop="menuStore.close(item.path)"/>
          </div>
        </a-button>

        <template #overlay>
          <a-menu>
            <a-menu-item @click="menuStore.closeByType('this',item.path)">关闭当前</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('other',item.path)">关闭其他</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('left',item.path)">关闭左侧</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('right',item.path)">关闭右侧</a-menu-item>
            <a-menu-divider />
            <a-menu-item divided @click="menuStore.closeByType('all',item.path)">关闭所有</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>

    <div class="tag-action d-flex align-center justify-center">
      <a-dropdown placement="bottom" arrow>
        <CaretDownOutlined />

        <template #overlay>
          <a-menu>
            <a-menu-item @click="menuStore.closeByType('this')">关闭当前</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('other')">关闭其他</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('left')">关闭左侧</a-menu-item>
            <a-menu-item @click="menuStore.closeByType('right')">关闭右侧</a-menu-item>
            <a-menu-divider />
            <a-menu-item divided @click="menuStore.closeByType('all')">关闭所有</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

    </div>
  </div>
</template>

<script setup lang="ts">
import {Menu, useMenuStore} from "~/store/modulers/menu";
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";
import {CloseOutlined,CaretDownOutlined} from '@ant-design/icons-vue';

const homeMenu: Menu = {
  icon: "", id: "", isShow: false, name: "首页", pid: "", sort: 0,
  path: "/home",

};
const router = useRouter();
const menuStore = useMenuStore();
const {history, defaultActive} = storeToRefs(menuStore);

function onSelect(menu: Menu) {
  if (menu.path != "/home") {
    menuStore.setActive(menu);
  } else {
    menuStore.setDefaultActive("/home");
  }
  router.push(menu.path);
}
</script>

<style scoped lang="scss">
.icesoft-app-tag {
  z-index: 1;
  height: 36px !important;
  min-height: 36px !important;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  .tag-action {
    width: 40px;
    height: 36px;
    border-left: 1px solid rgba(5, 5, 5, 0.06);
  }

  .tag-item {
    font-size: 12px;
    padding-right: 4px;
  }

  .home {
    padding-right: 8px;
  }

  .close-icon {
    margin-left: 6px;
    border-radius: 100%;
    padding: 3px;

    &:hover {
      background-color: #ff4d4f;
      color: white;
    }
  }
}
</style>
